<template>
    <div id="nav">
        <div :id="key" v-for="(value, key, index) in contents" @click="getContent(value)" :key="index">
            <span :class="{ active: currentIndex == index }" @click="currentIndex = index">
                {{ key }}
            </span>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            currentIndex: -1,
            contents: {
                'left': '我是Left的内容',
                'center': '我是Center的内容',
                'right': '我是Right的内容'
            }
        }
    },
    emits: ['content'],
    methods: {
        getContent(value) {
            this.$emit('content', value)
        }
    },
}
</script>

<style scoped>
.active {
    font-weight: bold;
    padding: 10px;
    border-bottom: solid 2px red;
}

#nav {
    display: flex;
    background-color: rgb(255, 251, 255);
}

#left {
    flex: 1;
    text-align: center;
    padding: 10px;
    /* background-color: rgb(245, 201, 230); */
}

#center {
    flex: 3;
    text-align: center;
    padding: 10px;
    /* background-color: rgb(246, 246, 161); */
}

#right {
    flex: 1;
    text-align: center;
    padding: 10px;
    /* background-color: rgb(87, 243, 178); */
}
</style>